<template>
  <div class="mapBox columnStart">
    <div class="address_top">
      <search>
        <van-search
          v-model="severkey"
          shape="round"
          placeholder="请输入搜索关键词"
          background="#f5f5f5"
        />
        <!-- <span slot="right"
          ><van-button size="small" class="btn_map" @click="ServerByKey" plain type="primary"
            >搜索</van-button
          ></span -->
        >
      </search>
    </div>
    <AMap ref="amapComponent" @my-address="MyAddress"/>
  </div>
</template>

<script>
import AMap from "@/components/AMap/AMap.vue";
import search from "@/components/search/search.vue";
export default {
  components: {
    AMap,
    search,
   
  },
  props:["shopAddressList","shopIndex"],
  name: "ChooseAddress",
  data() {
    return {
      severkey:'',
      address:[]
    };
  },
  methods: {
    ServerByKey() {

    },
     MyAddress(address){
       this. address= address
     }
  },
  mounted(){  
     setTimeout(()=>{
         this.$refs.amapComponent.req_post(this.shopAddressList)
     },1000)
  },
  watch:{
    address(){
      this.$emit("my-address",this.address)
    },
    shopIndex(){
      this.$refs.amapComponent.req_post([this.shopAddressList[this.shopIndex]])
    }
  }
};
</script>

<style scoped lang="less">
.btn_map {
  margin-top: 3vw;
  margin-left: 3vw;
}
.mapBox {
  background: #f5f5f5;
  .mapSearchBox {
    width: 7.1rem;
    height: 2.7rem;
    margin: 0.2rem auto;
    background: #ffffff;
    border: solid 0.01rem #cccccc;
    -webkit-border-radius: 0.1rem;
    -moz-border-radius: 0.1rem;
    border-radius: 0.1rem;
    padding: 0 0.2rem;
    .searchIcon {
      width: 0.36rem;
      height: 0.36rem;
      margin-right: 0.2rem;
    }
    .mapInput {
      width: 6rem;
      border: none;
    }
  }
  .mapAddressBox {
    padding: 0.2rem 0 1rem 0.2rem;
    width: 100%;
    background: #ffffff;
    height: 5rem;
    overflow: auto;
    .mapAddressLi {
      padding: 0.2rem 0.2rem 0.2rem 0;
      border-bottom: solid 0.01rem #e6e6e6;
      .addressBox {
        align-items: flex-start;
        .addressName {
          max-width: 6rem;
          overflow: hidden;
          -ms-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .detailAddress {
          margin-top: 0.1rem;
          font-size: 0.24rem;
          max-width: 6rem;
          overflow: hidden;
          -ms-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
